import React, { Component } from 'react';
import { Card, Alert, Typography } from 'antd';
import { useIntl, FormattedMessage } from 'umi';
import styles from './Welcome.less';
import UserList from './UserList/UserList';
import WebIm from './WebIm';

// const CodePreview: React.FC = ({ children }) => (
//   <pre className={styles.pre}>
//     <code>
//       <Typography.Text copyable>{children}</Typography.Text>
//     </code>
//   </pre>
// );
class Welcome extends Component {
  constructor({ breakpoint, match, entities }) {
    super();
    this.state = {
      leftWidth: '20vw',
      offset: 0,
      isDown: false,
    };
  }

  handleMouseDown = (e) => {
    const { offset } = this.state;
    const startX = e.clientX;
    const move = (moveEvent) => {
      moveEvent.preventDefault();
      moveEvent.stopPropagation();
      let currentOffset = startX - moveEvent.clientX;
      currentOffset += offset;
      console.log('currentOffset', currentOffset);

      this.setState({ offset:currentOffset });
    };

    const up = (moveEvent) => {
      document.removeEventListener('mousemove', move, true);
      document.removeEventListener('mouseup', up, true);
    };
    document.addEventListener('mousemove', move, true);
    document.addEventListener('mouseup', up, true);
  };

  render() {
    const { leftWidth, offset } = this.state;
    return (
      <section className={styles.container}>
        <div className={styles.left} style={{ width: `calc(${leftWidth} - ${offset}px)` }}>
          <UserList />
          <div className={styles.resizeLeft} onMouseDown={(e) => this.handleMouseDown(e)}></div>
        </div>
        <div className={styles.middle}>
          <WebIm {...this.props}></WebIm>
        </div>
        {/* <div className={styles.right}>右边</div> */}
      </section>
    );
  }
}
export default Welcome;
